<template>
    <div class="bigbox">
        <h1>反馈列表</h1>
        <div class="feedbackBox">
            <el-table :data="tableData" border style="width:calc(100% - 20px);height: 100%;margin: 0 10px;">
                <el-table-column prop="userId" label="提交账号id" width="100" />
                <el-table-column prop="theme" show-overflow-tooltip label="这是主题" width="250" />
                <el-table-column prop="createTime" label="提交时间" width="180" />
                <el-table-column prop="examine" label="是否审核" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.examine" type="success">已审核</el-tag>
                        <el-tag v-else type="danger">未审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="outcome" show-overflow-tooltip label="处理结果" min-width="180" />
                <el-table-column prop="handleTime" label="处理时间" width="180" />
                <el-table-column prop="handleUser" label="处理人" width="180" />
                <el-table-column fixed="right" label="操作" width="110">
                    <template #default="scope">
                        <el-button link type="primary" v-if="scope.row.examine" size="small"
                            @click="showJieguo(scope.row)">查看审核结果</el-button>
                        <el-button type="primary" v-else @click="shenheStart(scope.row)">进行审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="page" v-model:page-size="limit" layout="prev, pager, next, jumper"
                :total="total" @current-change="handleCurrentChange" />
        </div>
        <!-- 审核对话框 -->
        <el-dialog v-model="centerDialogVisible" :title="detailsData.theme" width="80%" align-center>
            <div style="display: flex;">
                <div style="min-width: 90px;">
                    反馈内容：
                </div>
                <div v-html="detailsData.content"></div>
            </div>
            <div style="margin: 10px 0">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入审核结果"
                    v-model="Auditing"></el-input>
            </div>
            <div style="text-align: right;">
                审核人：<el-input type="text" placeholder="审核人" style="width:200px" v-model="Operator"></el-input>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="ConductAnAudit(detailsData.id)">
                        审核
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 查看审核结果 -->
        <el-dialog v-model="showJieguoWin" :title="detailsData.theme" width="80%" align-center>
            <div style="display: flex;">
                <div style="min-width: 90px;margin-bottom: 10px;">
                    反馈内容：
                </div>
                <div v-html="detailsData.content"></div>
            </div>
            <div style="display: flex;border-top: 1px dashed #ccc;padding: 10px 0">
                <div style="min-width: 90px;">
                    回复内容：
                </div>
                <div v-html="detailsData.outcome"></div>
            </div>
            <div style="text-align: end;">处理人:{{ detailsData.handleUser }} <br>{{ detailsData.handleTime }}</div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showJieguoWin = false">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'FeedbackList',
    title: '反馈列表',
    order: 2,
    haveThis: true
}
</script>
<script setup>
import { onMounted, ref } from 'vue'
import axiosServer from "@/utils/request";
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter();
// 结果展示
const showJieguoWin = ref(false)
const showJieguo = (row) => {
    routerDetail(row.id)
    showJieguoWin.value = true
}

// 进行审核
const centerDialogVisible = ref(false);
// 详情数据
const detailsData = ref({
    content: '',
    theme: '',
    handleTime: '',
    handleUser: ''
})
const shenheStart = (row) => {
    routerDetail(row.id)
    centerDialogVisible.value = true;
    Auditing.value = ''
    Operator.value = ''
}
// 进行审核
const Auditing = ref('')
const Operator = ref()
const ConductAnAudit = (id) => {
    ElMessageBox.confirm(
        '您确认进行审核吗?',
        '确认信息',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { code, data, message } = await axiosServer({
                method: "post",
                url: "/opinion/update",
                data: {
                    outcome: Auditing.value,
                    handleUser: Operator.value,
                    id: id,
                }
            });
            if (code === 1) {
                ElMessage({
                    type: 'success',
                    message: '审核成功',
                })
                centerDialogVisible.value = false;
                getList(page.value, limit.value)
                Auditing.value = ''
                Operator.value = ''
            } else {
                ElMessage({
                    type: 'success',
                    message: message,
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您取消了操作',
            })
            centerDialogVisible.value = false;
            getList(page.value, limit.value)
            Auditing.value = ''
            Operator.value = ''
        })

}
// 查看详细内容
const routerDetail = async (id) => {
    let { code, data } = await axiosServer({
        method: "get",
        url: "/opinion/loadById/" + id,
    });
    if (code === 1) {
        detailsData.value = data
    } else {
        console.log("获取详情失败");
    }
}
// 获取列表
const tableData = ref([])
const getList = async (page, limit) => {
    let { code, data, count } = await axiosServer({
        method: "get",
        url: "/opinion/listData",
        params: { page, limit }
    });
    if (code === 1) {
        tableData.value = data
        total.value = count
    } else {
        console.log("获取列表失败");
    }
}
// 分页
const page = ref(1);
const limit = ref(10);
const total = ref(0);
const handleCurrentChange = (val) => {
    getList(val, limit.value)
};
onMounted(() => {
    getList(page.value, limit.value)
})
</script>
<style scoped lang='scss'>
.bigbox {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    h1 {
        margin: 10px 20px;
    }

    .feedbackBox {
        flex: 1;
        overflow-y: auto;
    }

    .pagination {
        margin: 10px 20px;
    }
}
</style>